<template>
    <div style="background: #f2f2f2;">
        <div class="header"><img src="../../images/left.png" alt="" @click="$router.back(-1)">任务详情</div>
        <!--header-->
        <div class="endClock">
            <p id="status_text" v-html="time"></p>
        </div>

        <div class="workinter">
            <p v-if="remark" class="remark" style="background:#FFF8C4;text-align: center">拒绝理由：{{ remark }}</p>
            <!--任务详情-->
            <div class="works_List">
                <div class="Numeset">
                    <div class="workNumts">
                        <p>任务账号：
                            <span data-clipboard-text="s1272339238765965bb"
                                  id="ticketNum">{{ task.work.work_no }}</span>
                        </p>
                    </div>
                    <div class="copyes" v-if="task.work.work_no">
                        <button class="btncopys" data-clipboard-target="#ticketNum" v-clipboard="task.work.work_no"
                                @success="handleSuccess" @error="handleError">
                            复制
                        </button>
                    </div>
                </div>
                <div class="clearfix scenred">
                    <div class="goodLogo">
                        <img :src="img" class="listImgs fl" @click="swiperIMG()" v-if="img"/>
                        <p>共{{ task.job.type.val == 3 ? get(task,'job.images.length')-1 : get(task,'job.images.length')
                            }}张</p>
                    </div>
                    <!--<span>1/2</span>-->
                    <div class="fl listTextDev">
                        <h3 @click="titleMessage(task.job.goods.goods_title)">{{ task.job.goods.goods_title }}</h3>
                        <p v-if="task.job.goods.goods_price">商品展示价格 <span>{{ task.job.goods.goods_price.replace(/\d\./, '*.') }}</span>
                        </p>
                        <p v-if="task.job.goods.pay_number">付款人数 <span>{{ task.job.goods.pay_number }}</span></p>
                        <div class="clearfix moneyset">
                            <div class="fl" style="margin-right: 0.57rem;">
                                <img src="../../images/privilege-money.png"/>
                                <span style="color:#FDB549;font-weight: 600;">{{ task.work.user_money }}</span>
                            </div>
                            <div class="fl" v-if="get(task,'job.reward.job_meta_value')">
                                <!--<span class="reward">加赏 <b>{{ get(task,'job.reward.job_meta_value') }}</b></span>-->
                                <em class="reward">
                                    <ul>
                                        <li>加赏{{ get(task,'job.reward.job_meta_value') }}</li>
                                    </ul>
                                </em>
                            </div>
                            <div class="fl" style="margin-left: 0.57rem;">
                                <img src="../../images/privilege-jifen.png"/>
                                <span style="color: #A1D0FC" v-if="task.job.sort == '1000000000'">{{ finish_work_credit }}</span>
                                <span style="color: #A1D0FC" v-else>{{ credit_multiple }}</span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- 特殊要求 -->
            <div id="tsyqBody" v-if="modalshow">
                <div class="head">
                    <h3>特殊要求</h3>
                    <p>请认真阅读特殊要求，并按要求做任务</p>
                </div>
                <div class="content">
                    {{ get(task,'job.reward.job_meta_value') }}
                </div>
            </div>
            <div class="modalzz" v-if="modalshow || swiperImg || exampleUrl"
                 @click="modalshow = false; swiperImg = false; exampleUrl = false"><img src="../../images/close.png"
                                                                                        alt=""
                                                                                        @click="modalshow = false;swiperImg = false;exampleUrl = false">
            </div>
            <img src="../../images/tsyq.gif" alt="" class="tsyq" @click="modalshow = true"
                 v-if="get(task,'job_meta.job_meta_key')">
            <!--推广需求-->
            <div class="tuiNeeds">
                <h3>推广需求</h3>
                <div class=" soneas">
                    <div class="fl">
                        <img src="../../images/5566.png"/>
                        <span>任务账号</span>
                    </div>
                    <div class="fr" v-if="task.consumer">
                        <span v-if="cross">{{ task.consumer }}</span>
                        <span v-else>{{ task.consumer.login }}</span>
                    </div>
                </div>
                <div class=" soneas">
                    <div class="fl">
                        <img src="../../images/5567.png"/>
                        <span>任务类型</span>
                    </div>
                    <div class="fr">
                        <span><em v-if="parent_job">（{{ parent_job }}）</em>{{ task.job.type.text }}</span>
                    </div>
                </div>
                <div class=" soneas">
                    <div class="fl">
                        <img src="../../images/5565.png"/>
                        <span>任务入口</span>
                    </div>
                    <div class="fr" style="text-align: right">

                        <em v-if="returnEntrance"
                            @click="exampleUrl = task.entrance_imgs[task.job.return_entrance.job_meta_value]" >{{
                            returnEntrance }}</em>


                        <span style="display: inline-block;" v-for="img in get(task,'job.images')" v-if="img.type == 4">
                            <a><img :src="img.url" v-if="img.url.indexOf('http') != -1" style="width:3rem"/>
                                <img :src="qiniu_domain_url + img.url" v-else style="width:3rem"/></a>
                        </span>

                        <span style="display: inline-block;" v-if="task.job.type.val == 3">
                            <a><img :src="task.job.qrcode.url" v-if="task.job.qrcode.url.indexOf('http') != -1"
                                    style="width:3rem" @click="exampleUrl = task.job.qrcode.url"/>
                                <img :src="qiniu_domain_url + task.job.qrcode.url" v-else style="width:3rem"
                                     @click="exampleUrl = qiniu_domain_url + task.job.qrcode.url"/></a>
                        </span>

                        <span v-if="task.job.type.val == 6" class="overauto"
                              v-clipboard="get(task, 'job.amoy_link.job_meta_value')" @success="handleSuccess"
                              @error="handleError">{{ get(task, 'job.amoy_link.job_meta_value') }}</span>
                        <span
                            @click="exampleUrl = 'https://imgshangjia.renqidaren.com/uploads/20180912/544a7d3a381b363236e17af5b5860b15.png'"
                            v-else-if="task.job.type.val == 4">{{ task.job.type.text }}</span>
                        <span
                            @click="exampleUrl = 'https://imgshangjia.renqidaren.com/uploads/20180912/68c500667488a6910b394ab7e1df0f37.png'"
                            v-else-if="task.job.type.val == 5">{{ task.job.type.text }}</span>
                        <span
                            @click="exampleUrl = 'https://imgshangjia.renqidaren.com/uploads/20180912/f1a70ef84ba0ae6c81ff5f51f6376752.png'"
                            v-else-if="task.job.type.val == 2">{{ task.job.type.text }}</span>
                        <span
                            v-else-if="task.job.type.val != 3 && task.job.type.val != 6 && task.job.type.val != 10 && get(task, 'work.keyword.keyword')"><em
                            v-clipboard="get(task, 'work.keyword.keyword')" @success="handleSuccess"
                            @error="handleError">{{ get(task, 'work.keyword.keyword') }}</em></span>
                    </div>
                </div>
            </div>
            <!--任务需求-->
            <div class="worksNeeds" v-if="task.job.type.val == 1 || task.job.type.val == 2">
                <h3>任务需求</h3>
                <!--<div class="copyes fr" style="margin: 0.1rem .55rem;padding-top: .4rem">-->
                <!--<button class="btncopys" data-clipboard-target="#ticketNum"-->
                <!--@click="jumpToTaobao()" v-if="task.open_taobao != 0">打开手淘-->
                <!--</button>-->
                <!--</div>-->
                <div class="Workssoneas">
                    <div class="fl">
                        <img src="../../images/444.png"/>
                        <span>任务要点</span>
                    </div>
                </div>
                <ul class="W_550">
                    <li>
                        <span style="width: 5rem;">搜索关键字（点击复制）</span>
                        <span v-clipboard="get(task, 'work.keyword.keyword')" @success="handleSuccess"
                              @error="handleError">{{ get(task, 'work.keyword.keyword') }}</span>
                    </li>
                    <li>
                        <span>搜索页范围</span>
                        <span>{{ get(task, 'work.keyword.page_start') }} - {{ get(task, 'work.keyword.page_end') }}</span>
                    </li>
                    <li>
                        <span>搜索类型</span>
                        <span>{{ get(task, 'work.keyword.search_type') }}</span>
                    </li>
                    <li>
                        <span>排序方式</span>
                        <span>{{ get(task, 'work.keyword.order_type') }}</span>
                    </li>
                    <li>
                        <span>价格区间</span>
                        <span>{{ get(task, 'work.keyword.price_start') }} - {{ get(task, 'work.keyword.price_end') }}</span>
                    </li>
                    <li>
                        <span>发货地</span>
                        <span>{{ get(task, 'work.keyword.send_address') }}</span>
                    </li>
                </ul>
            </div>
            <!--特殊需求-->
            <div class="specialNeeds " v-if="get(task,'job.job_meta.job_meta_value')">
                <h3>特殊需求</h3>
                <div class="copyes fr" style="margin: 0.1rem .55rem">
                    <button class="btncopys" data-clipboard-target="#ticketNum"
                            v-clipboard="get(task,'job.job_meta.job_meta_value')" @success="handleSuccess"
                            @error="handleError">复制
                    </button>
                </div>
                <div class="tsxq">
                    <span>{{ get(task,'job.job_meta.job_meta_value') }}</span>
                </div>
            </div>
            <div class="specialNeeds">
                <h3>注意事项</h3>
                <div class="W_575">
                    <div class="notice">
                        <span>如未遵守以下几点并多次被投诉将封号</span>
                    </div>
                    <!--<div class="noticeFirst">-->
                        <!--<img src="../../images/569.png"/>-->
                        <!--<span>重要通知：请小伙伴们，【手动启动】手淘app做任务，如被商家举报，情节严重者，平台将封号处理</span>-->
                    <!--</div>-->
                    <div class="noticeFirst">
                        <img src="../../images/569.png"/>
                        <span>接取任务后，请确保在【任务有效期内】提交任务如果任务过期，将扣除0.2金币</span>
                    </div>
                    <div class="explain">
                        <p v-if="task.consumer">1.确认使用<span v-if="cross">【{{ task.consumer }}】</span>
                            <span v-else>【{{ task.consumer.login }}】</span>买号登录手机淘宝app，用错买号将扣除佣金，并进行处罚<span>2金币</span>，多次被投诉将<span>封号</span>
                        </p>
                        <p>2.请务必核对店铺名称/店铺掌柜名<span>【{{ task.job.shop.hide_name }}】</span>，并对目标商品从上到下进行<span>至少2分钟浏览</span>
                        </p>
                        <p>3.加购物车至少保留<span>【7】</span>天，收藏商品，收藏店铺至少保留<span>【30】</span>天</p>
                    </div>
                </div>
            </div>

            <!--提交截图-->
            <div class="printscreen">
                <h3>提交截图</h3>
                <div class="specialNeedsImg">
                    <div class="fl">
                        <img src="../../images/000.png"/>
                        <span>示例截图</span>
                    </div>
                    <div class="copyes" style="position: absolute;left: 3rem;">
                        <a href="https://wb.renqidaren.com/app_html/example_images.html">
                            <button>所有示例</button>
                        </a>
                    </div>
                    <div class="fr copyes">
                        <a :href="task.guifan">
                            <button>规范</button>
                        </a>
                    </div>
                </div>
                <ul class="noticeander">
                    <li>
                        <img src="../../images/569.png"/>
                        <span>请在任务过期前提交任务</span>
                    </li>
                    <li>
                        <img src="../../images/569.png"/>
                        <span>注意：示例样图仅供参考</span>
                    </li>
                    <li v-if="task.consumer">
                        <img src="../../images/569.png"/>
                        <span>请确保使用<span v-if="cross">【{{ task.consumer }}】</span>
                            <span v-else>【{{ task.consumer.login }}】</span>执行任务</span>
                    </li>
                </ul>
                <div class="Inphotts clearfix">
                    <div class="Joinglist clearfix">
                        <div class="Imgphoto fl" v-for="(origin,index) in task.work.items.origin"
                             v-if="origin.job_option_group == 1">
                            <div class="Imgphotos">
                                <!-- status 为 1 时为可传图片状态 -->
                                <div class="JoinImgs"
                                     v-if="task.work.status.val == 1 || task.work.status.val == 5 || task.work.status.val == 6">
                                    <div v-if="task.work.status.val != 5 && task.work.status.val != 6">
                                        <img v-if="origin.uploadedImg" :src="origin.uploadedImg"
                                             :id="'jobImg' + origin.job_option_id"
                                             class="JoinImgsLogo"/>
                                        <img v-else src="../../images/336.png" :id="'jobImg' + origin.job_option_id"
                                             class="JoinImgsLogo"/>
                                        <input type="file" @change="file" accept="image/*" name="image" multiple="multiple"  :id="origin.job_option_id"
                                               inx="1"/>

                                    </div>
                                    <div v-else>
                                        <div v-for='imgss in task.work.work_images' v-if="imgss.job_option_id == origin.job_option_id">
                                            <img class="JoinImgsLogo" :id="'jobImg' + origin.job_option_id"
                                                 :src="imgss.job_option_id == origin.job_option_id ? imgss.screenshot_url : ''"
                                                 alt="">
                                            <input type="file" @change="file" accept="image/*" name="image" multiple="multiple"  :id="origin.job_option_id"
                                                   inx="1"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="JoinImgs" v-else>
                                    <img class="JoinImgsLogo"
                                         v-for='imgss in task.work.work_images'
                                         v-if="imgss.job_option_id == origin.job_option_id"
                                         :src="imgss.job_option_id == origin.job_option_id ? imgss.screenshot_url : ''"
                                         alt="">
                                </div>
                                <span class="loding" :id="'loding' + origin.job_option_id"></span>
                                <p class="imgType">{{ origin.job_option_name }}</p>
                            </div>
                            <p class="lookImgs" :data-src=" qiniu_domain_url + origin.job_example_img"
                               @click="exampleUrl = qiniu_domain_url + origin.job_example_img"><span>查看样图</span></p>
                        </div>
                    </div>
                    <div class="infortext">
                        <img src="../../images/33666.png"/>
                        <span>重要通知：请小伙伴们，【手动启动】手淘app做任务，如被商家举报，情节严重者，平台将封号处理</span>
                    </div>
                </div>
                <div class="importantInfor">
                    <ul>
                        <li v-if="model" style="line-height: .6rem"><span class="rTime_red"
                                                                          v-if="rTime">{{ rTime }}秒</span>倒计时结束后，才可以开始做其他任务截图上传
                            <br/>倒计时期间请在宝贝详情页继续深度浏览对应宝贝。
                        </li>
                        <li class='ask_everyone' v-if="task.ask_everyone">
                            <p>注意：请复制以下摸板，进行提问，并提交【问大家截图】否则无法通过审核</p>
                            <div class="ask_everyone_btn copyes clearfix">
                                <p>{{ task.ask_everyone }}</p>
                                <button  v-clipboard="task.ask_everyone" @success="handleSuccess" @error="handleError">复制</button>
                            </div>
                        </li>
                        <li id="depth" v-if="task.question">
                            <p class="text-red">找到商品后在商品详情页面从上至下缓缓浏览 并且在详情页中 根据以下提示找到问题答案：</p>
                            <div class="answers">
                                <div class="depth-answers-flex"><h4>文字提示</h4><span class="text-red">{{ task.question.title }}</span>
                                </div>
                                <div class="depth-answers-flex1"><h4>图片提示</h4><img :src="task.question.img" alt=""
                                                                                   width="100%"
                                                                                   @click="exampleUrl = task.question.img">
                                </div>
                            </div>
                            <p style="margin-top: .5rem;">答案字数<span
                                class="text-red"> {{ task.question.answer_num }}个字</span></p>
                            <div id="depth-input">
                                <input type="text" v-model="answer" :placeholder="holder_answer">
                                <button class="sucs-button"
                                        @click="answers(task.question.question_id, answer, task.work.work_id)">验证
                                </button>
                                <div class="copyes fr">
                                    <button class="text-blue" @click="exampleUrl = task.search_answer"
                                            style="padding: 0.07rem 0.1rem;height: 1rem;color:#000;margin-top: 0.05rem">
                                        如何找答案
                                    </button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--上传截图-->
                <div class="Inphotts clearfix">
                    <div class="Joinglist PutPhoto clearfix">
                        <div class="Imgphoto fl" v-for="(origin,index) in task.work.items.origin"
                             v-if="origin.job_option_group == 2">
                            <div class="Imgphotos">
                                <!--<div class="JoinImgs" @click="file($event, 2, origin.job_option_id)"-->
                                <!--v-if="task.work.status.val == 1 || task.work.status.val == 5">-->
                                <!--<img src="../../images/336.png" :id="'jobImg' + origin.job_option_id"-->
                                <!--class="JoinImgsLogo" v-if="task.work.status.val != 5"/>-->
                                <!--<img class="JoinImgsLogo" :id="'jobImg' + origin.job_option_id" v-else-->
                                <!--:src="task.work.work_images[index].job_option_id ==  origin.job_option_id ? task.work.work_images[index].screenshot_url : ''"-->
                                <!--alt="">-->
                                <!--</div>-->
                                <div class="JoinImgs"
                                     v-if="task.work.status.val == 1 || task.work.status.val == 5 || task.work.status.val == 6">
                                    <div v-if="task.work.status.val != 5 && task.work.status.val != 6">
                                        <img v-if="origin.uploadedImg" :src="origin.uploadedImg"
                                             :id="'jobImg' + origin.job_option_id"
                                             class="JoinImgsLogo"/>
                                        <img v-else src="../../images/336.png" :id="'jobImg' + origin.job_option_id"
                                             class="JoinImgsLogo"/>
                                        <input type="file" @change="file" accept="image/*" name="image" multiple="multiple"  :id="origin.job_option_id"
                                               inx="2"/>
                                    </div>
                                    <div v-else>
                                        <div v-for='imgss in task.work.work_images' v-if="imgss.job_option_id == origin.job_option_id">
                                            <img class="JoinImgsLogo" :id="'jobImg' + origin.job_option_id"
                                                 :src="imgss.job_option_id == origin.job_option_id ? imgss.screenshot_url : ''"
                                                 alt="">
                                            <input type="file" @change="file" accept="image/*" name="image" multiple="multiple" :id="origin.job_option_id"
                                                   inx="2"/>
                                        </div>
                                    </div>

                                </div>
                                <div class="JoinImgs" v-else>
                                    <img class="JoinImgsLogo"
                                         v-for='imgss in task.work.work_images'
                                         v-if="imgss.job_option_id == origin.job_option_id"
                                         :src="imgss.job_option_id == origin.job_option_id ? imgss.screenshot_url : ''"
                                         alt="">
                                </div>
                                <span class="loding" :id="'loding' + origin.job_option_id"></span>
                                <p class="imgType">{{ origin.job_option_name }}</p>
                            </div>
                            <p class="lookImgs" :data-src="qiniu_domain_url + origin.job_example_img"
                               @click="exampleUrl = qiniu_domain_url + origin.job_example_img"><span>查看样图</span></p>
                        </div>
                        <div id="Joinglist_model" v-if="task.work.status.val == 1 && model"
                             @click="$toast('深度浏览倒计时中请继续浏览对应宝贝')"></div>
                    </div>
                </div>
            </div>
            <div>
                <div class="">
                    <p v-if="remark" class="remark" style="background:#FFF8C4;">拒绝理由：{{ remark }}</p>
                    <div v-if="task.work_apply"><p class="remark" style="background:#A5D1FE;">介入理由：{{
                        task.work_apply.content }}</p></div>
                    <p v-if="work_apply" class="remark" style="background:#FFAEAD;">平台介入反馈：{{ work_apply }}</p>
                </div>

                <button class="putwork" v-on:click="submit()" :disabled="model" :class="{huise: model}"><i>提交任务</i>
                    <p v-html="time"></p></button>
                <button class="putwork" @click="reasonShow = true"
                        v-if="task.work.status.val == 1 || task.work.status.val == 5"><i>放弃任务</i></button>
                <button class="putwork" @click="apply = true" v-if="again_number && task.work.status.val == 5">
                    <i>申请平台介入</i></button>
            </div>
        </div>

        <!--提交任务-->

        <!--<div id="detailZZ" v-if="task.work.status.val != 1 && task.work.status.val != 5"></div>-->
        <!-- 轮播 -->
        <div style="position: fixed;right:.5rem;left:.5rem; top:1rem;z-index:9999;border-radius: 10px;overflow: hidden"
             v-if="swiperImg">
            <div class="banner_head">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="width:100%;" v-for="img in get(task,'job.images')"
                             v-if="img.type != 4">
                            <a><img :src="img.url" v-if="img.url.indexOf('http') != -1"/>
                                <img :src="qiniu_domain_url + img.url" v-else/></a>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
        <!-- 示例截图 -->
        <div id="exampleImg" v-if="exampleUrl">
            <div>
                <img :src="exampleUrl" alt="">
            </div>
        </div>
        <!-- -->
        <!-- 注意事项 -->
        <!--<div class="specialNeeds" id="presenting" v-if="presenting && presentingTrue">-->
        <!--<h3>注意事项</h3>-->
        <!--<span class="specialNeeds_head">如未遵守以下几点并多次被投诉将封号</span>-->
        <!--<img src="../../images/presenting_close.png" alt="" class="fr" @click="presentingTrue = false">-->
        <!--<div class="tsxq">-->
        <!--<p>-->
        <!--1.确认使用<span>【{{ task.consumer.login }}】</span>买号登录手机淘宝app，用错买号将扣除佣金，并进行处罚<span>2金币</span>，多次被投诉将<span>封号</span>-->
        <!--</p>-->
        <!--<p>2.请务必核对店铺名称/旺旺<span>【{{ task.job.shop.hide_name }}】</span>，并对目标商品从上到下进行<span>至少2分钟浏览</span>-->
        <!--</p>-->
        <!--<p>3.加购物车至少保留<span>【7】</span>天，收藏商品，收藏店铺至少保留<span>【30】</span>天</p>-->
        <!--<p>4.【淘口令】任务的搜索截图请提交<span>淘口令弹窗截图</span></p>-->
        <!--</div>-->
        <!--</div>-->
        <!-- 放弃任务列表弹窗 -->
        <div id="reason" v-if="reasonShow">
            <ul>
                <li class="reasonTop">请选择原因</li>
                <li v-for="list in reasonList" @click="abortMission(list.text)">{{ list.text }}</li>
                <li class="reasonBottom" @click="reasonShow = false">取消</li>
            </ul>
        </div>
        <!-- 平台介入 -->
        <div id="apply" v-if="apply">
            <div class="applyBody">
                <h3>申请平台介入</h3>
                <!--<label for="">手机号</label><input type="text" placeholder="请填写手机号" >-->
                <!--<label for="">介入原因</label>-->
                <textarea v-model="applyText" placeholder="请填写需要介入的原因" contenteditable="true"></textarea>
                <div class="applyBodyBtn">
                    <button @click="apply = false">取消</button>
                    <button @click="applySuccess">提交</button>
                </div>
            </div>
        </div>
        <div id="loading" v-if="loding">
            <img src="https://imgshangjia.renqidaren.com/uploads/20180910/ed54624966042c63a0cb0e9fa7418ece.gif" alt="">
        </div>
        <div class="fixed_color"></div>
    </div>
</template>

<script>
    import api from '../../utils/api';
    import * as qiniu from 'qiniu-js';
    import {GenNonDuplicateID} from '../../utils/config';
    import _ from 'lodash';
    import {MessageBox} from 'mint-ui';

    export default {
        name: 'Detail',
        props: {
            accepts: {
                type: String,
                default: 'image/jpeg,image/jpg,image/png,image/gif'
            },
            maxSize: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                task: {
                    work: {
                        keyword: '',
                        items: '',
                        status: ''
                    },
                    job: {
                        goods: '',
                        type: '',
                        job_meta: '',
                        shop: '',
                    },
                    consumer: '',
                },
                img: '', //商品主图 只检索第一张
                screenshots: [], // 上传图片后 信息存储
                qiniu_domain_url: '',  //七牛主域名
                imginx: 0, // 上部分截图上传的 总长度 与 上传长度 匹配后计时
                imgleng: 0, // 上传长度
                rTime: false, // 上传图片倒计时
                time: '', //输出计时
                flag: false, //判断是否计时结束
                endTime: '', // 结束时间,
                workImgLeng: '',
                consumer_id: false,
                modalshow: false,
                swiperImg: false,
                goodLogoLength: '',
                presenting: false,
                presentingTrue: true,
                exampleUrl: '',
                reason: '',
                reasonList: [{
                    text: '不想做了'
                }, {
                    text: '提交不了截图'
                }, {
                    text: '不知道怎么做任务'
                }, {
                    text: '关键词找不到商品'
                }, {
                    text: '任务信息异常'
                }, {
                    text: '其他'
                }],
                reasonShow: false,
                model: true,
                remark: false,
                again_number: false,
                apply: false,
                applyText: '',
                loding: false,
                abortImg: [],
                work_apply: false,
                returnEntrance: false,
                parent_job: false,
                depth: false,
                answer: '',
                sendTime: false,
                holder_answer: false,
                credit_multiple: false, // 推荐积分
                finish_work_credit: false, // 积分
                cross: false, // 是否是跨平台
                copyData: 'copy data'
            }
        },
        created() {
            this.credit_multiple = parseInt(localStorage.getItem('credit_multiple'));
            this.finish_work_credit = parseInt(localStorage.getItem('finish_work_credit'));
            var sUserAgent = window.navigator.userAgent.toLowerCase();
            // if(this.is_weixn_qq().indexOf('QQ') != -1){
            //     alert('qq内置浏览器暂不支持上传图片 请点击右上角选择系统默认浏览器打开')
            // }

            // this.cross = this.$route.query.cross;
        },
        methods: {
            is_weixn_qq() {
                var ua = navigator.userAgent.toLowerCase();
                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                    return "weixin";
                } else if (ua.match(/QQ/i) == "qq") {
                    return "QQ";
                }
                return false;
            },
            get(object, path, defaultValue) {
                return _.get(...arguments);
            },
            // 调起接口获取任务详情数据
            async setData(type = 0) {
                var url = '/works/show'
                if (this.cross) {
                    url = '/cross_platform/work'
                }
                let resp = await api.request(url, 'get', {work_user_id: this.$route.params.id})
                var _that = this;
                // 图片提交后 等待时间
                this.rTime = resp.data.data.job.job_limit.browsing_time * 60
                // 检索是否提交过任务
                if (localStorage.getItem('depth_work_id') && resp.data.data.work.status.val == 1) {
                    if (localStorage.getItem('depth_work_id') == resp.data.data.work.work_id) {
                        this.answer = localStorage.getItem('depth_text')
                        // this.depth = true;
                    }
                }
                _that.task = resp.data.data;
                if (localStorage.getItem('work_user_id') == _that.$route.params.id && resp.data.data.work.status.val == 1) {
                    _that.screenshots = JSON.parse(localStorage.getItem('imgupload'))
                    for (var iteminx in _that.task.work.items.origin) {
                        for (var img in _that.screenshots) {
                            if (_that.task.work.items.origin[iteminx].job_option_id == _that.screenshots[img].job_option_id) {
                                _that.task.work.items.origin[iteminx].uploadedImg = _that.screenshots[img].screenshot_url
                            }
                        }
                    }

                    _that.imginx = parseInt(localStorage.getItem('imginx'))
                    if (localStorage.getItem('sendTime')) {
                        this.rTime = localStorage.getItem('sendTime')
                        localStorage.removeItem('sendTime')
                    }
                } else {
                    localStorage.removeItem('sendTime')
                    localStorage.removeItem('imginx')
                }


                // 加载问题答案
                if (resp.data.data.work.status.val != 1) {
                    _that.answer = _that.task.question.answer;
                } else {
                    if (_that.task.question) {
                        if (_that.task.question.answer.length >= 3) {
                            _that.holder_answer = _that.task.question.answer;
                        }
                    }
                }
                // 如果为拒绝任务，则没有图片提交限制
                if (_that.task.work.status.val == 5 || _that.task.work.status.val == 6) {
                    this.rTime = 0;
                    this.depth = true
                }
                let returnzj = [];
                returnzj[1] = '足迹进入';
                returnzj[2] = '收藏进入';
                returnzj[3] = '加购进入';
                returnzj[4] = '猜你喜欢';
                // 回访任务入口
                if (_that.task.job.return_entrance) {
                    _that.returnEntrance = returnzj[_that.task.job.return_entrance.job_meta_value];
                }
                if (_that.task.job.parent_job) {
                    _that.parent_job = _that.task.job.parent_job.p_type.text
                }
                this.consumer_id = _that.task.consumer_id;
                // 平台介入
                if (_that.task.again_number) {
                    _that.again_number = _that.task.again_number.meta_value;
                } else {
                    _that.again_number = false;
                }
                if (_that.task.work_apply) {
                    _that.work_apply = _that.task.work_apply.remark
                }

                _that.qiniu_domain_url = 'https://imgshangjia.renqidaren.com/'
                if (_that.task.job.images[0].url.indexOf('http') != -1) {
                    _that.img = _that.task.job.images[0].url;
                } else {
                    _that.img = _that.qiniu_domain_url + _that.task.job.images[0].url
                }
                // if (_that.task.work.status.val != 1 && _that.task.work.status.val != 5) {
                //     return false;
                // }

                // meta数据 （拒绝理由等）

                for (let i in _that.task.work.work_meta) {
                    // if(!this.cross){
                    if (_that.task.work.work_meta[i].meta_key == 'expire_time') {
                        // _that.endTime = _that.getLocalTime(_that.task.work.work_meta[i].meta_value)
                        _that.endTime = _that.task.work.work_meta[i].meta_value
                    }
                    if (_that.task.work.work_meta[i].meta_key == 'remark') {
                        _that.remark = _that.task.work.work_meta[i].meta_value
                    }
                }
                // if (this.task.work.status.val == 1 || this.task.work.status.val == 5) {
                //     _that.endTime = _that.getLocalTime(this.task.expire_time);
                // }
                for (let i in _that.task.work.items.origin) {
                    if (_that.task.work.items.origin[i].job_option_group == 1) {
                        _that.imgleng++
                    }
                    _that.workImgLeng++
                }
                this.$nextTick(() => {
                    let time = setInterval(() => {
                        if (this.task.work.status.val != 1 && (this.task.work.status.val != 5 || this.task.work.status.val != 6)) {
                            this.time = this.task.work.status.text
                            // document.getElementBy('status_text').innerHTML = this.task.work.status.text
                            clearInterval(time)
                            return false;
                        }
                        if (this.flag == true) {
                            clearInterval(time)
                        }
                        this.timeDown()
                    }, 500)
                })
            },
            // 上传图片到七牛云
            async file(event) {
                let job_option_id = event.target.getAttribute('id')
                var job_inx = event.target.getAttribute('inx');
                job_inx == 1 ? this.imginx += 1 : this.imginx = this.imginx;
                document.getElementById('loding' + job_option_id).style.width = 0 + '%';
                let file = event.target.files[0];
                let _that = this;

                // 获取七牛token
                let resp = await api.request('/qiniu_token', 'get', {})
                var domain = 'imgapp.renqidaren.com';
                if (file) {
                    let putExtra = {
                        fname: file.name,
                        params: {},
                        mimeType: ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']
                    }
                    let config = {
                        useCdnDomain: true,
                        region: null
                    };
                    _that.loding = true;
                    let observer = {
                        next(res) {
                            document.getElementById('loding' + job_option_id).style.width = res.total.percent + '%';
                            console.log(1)
                        },
                        error(err) {
                            document.getElementById('loding' + job_option_id).style.width = 20 + '%';
                            _that.$toast('上传失败');
                            _that.loding = false;
                            return false;
                        },
                        complete(res) {
                            setTimeout(function (){
                                _that.loding = false;
                            }, 500)
                            if (_that.task.work.status.val == 5 || _that.task.work.status.val == 6) {
                                document.getElementById('jobImg' + job_option_id).setAttribute('src', 'https://' + domain + '/' + res.key)
                                _that.screenshots = _that.task.work.work_images;
                                for (let inx in _that.screenshots) {
                                    _that.screenshots[inx].create_time = (new Date(_that.screenshots[inx].create_time)).getTime() / 1000; // 所有数组内日期转时间戳
                                    if (_that.screenshots[inx].job_option_id == job_option_id) {
                                        _that.screenshots[inx].screenshot_url = 'https://' + domain + '/' + res.key; // 覆盖图片
                                        _that.screenshots[inx].create_time = Date.parse(new Date()) / 1000; //覆盖时间
                                    }
                                }

                                _that.model = false;
                                _that.rTime = 0;
                                return false;
                            }
                            document.getElementById('jobImg' + job_option_id).setAttribute('src', 'https://' + domain + '/' + res.key)
                            for (let i in _that.screenshots) {
                                if (_that.screenshots[i].job_option_id == job_option_id) {
                                    _that.screenshots.splice(i, 1)
                                }
                            }
                            ;
                            _that.screenshots.push({
                                screenshot_url: 'https://' + domain + '/' + res.key,
                                job_option_id: job_option_id,
                                create_time: Date.parse(new Date()) / 1000
                            })
                            //记录图片上传
                            localStorage.setItem('imgupload', JSON.stringify(_that.screenshots));
                            localStorage.setItem('work_user_id', _that.$route.params.id)
                            localStorage.setItem('imginx', _that.imginx);
                            _that.imginx = parseInt(localStorage.getItem('imginx'))
                            if (_that.imginx == _that.imgleng) {
                                _that.send()
                            }
                        }
                    }


                    var observable = qiniu.upload(file, 'job/' + GenNonDuplicateID(32), resp.data.data, putExtra, config)
                    observable.subscribe(observer)
                }

            },

            // 上传图片倒计时
            send() {
                let that = this;
                let rTime = that.rTime;
                let interval = window.setInterval(() => {
                    if (--that.rTime <= 0) {
                        that.rTime = 0;
                        this.model = false
                        window.clearInterval(interval);
                    }
                    localStorage.setItem('sendTime', that.rTime)
                }, 1000);
            },
            // 任务结束时间倒计时
            timeDown() {
                // const endTime = new Date(this.endTime)
                // const nowTime = new Date();
                let leftTime = parseInt(this.endTime - (Date.parse(new Date()) / 1000))
                let d = parseInt(leftTime / (24 * 60 * 60))
                let h = this.formate(parseInt(leftTime / (60 * 60) % 24))
                let m = this.formate(parseInt(leftTime / 60 % 60))
                let s = this.formate(parseInt(leftTime % 60))

                let ds = '';
                let hs = '';
                let ms = '';
                if (leftTime <= 0) {
                    this.flag = true;
                    this.time = '任务已结束';
                    this.model = true;
                    return false;
                }

                // d != 0 ? time += d + '天' : '';
                // h != 0 ? time += h + '小时' : '';
                // m != 0 ? time += m + '分' : '';
                // this.time = '任务过期时间：' + time + s + '秒'

                if (d != 0) {
                    d = '<span>' + d + '</span>';
                    ds = ':'
                } else {
                    d = ''
                }
                if (h != 0) {
                    h = '<span>' + h + '</span>';
                    hs = ':'
                } else {
                    h = ''
                }
                if (m != 0) {
                    m = '<span>' + m + '</span>'
                    ms = ':'
                } else {
                    m = ''
                }
                this.time = '<em>任务过期时间：</em>' + d + ds + h + hs + m + ms + '<span>' + s + '</span>'
            },
            formate(time) {
                if (time >= 10) {
                    return time
                } else {
                    return `0${time}`
                }
            },
            // 时间戳转换
            getLocalTime(nS) {
                let str = new Date(parseInt(nS) * 1000).toLocaleString('chinese', {hour12: false})
                return str.split('/').join('-');
            },
            // 提交任务
            async submit() {
                if (!this.depth && this.task.question) {
                    this.$toast('请先点击验证深度浏览答案');
                    return false;
                }
                try {
                    if (this.task.work.status.val != 5 && this.task.work.status.val != 6) {
                        if (this.workImgLeng != this.screenshots.length) {
                            this.$toast('图片未上传完整！');
                            return false;
                        }
                    }


                    let param = {
                        work_user_id: this.$route.params.id,
                        consumer_id: this.consumer_id,
                        work_images: JSON.stringify(this.screenshots)
                    }
                    var url = '/works/store';
                    if (this.cross) {
                        url = '/cross_platform/store'
                    }
                    let resp = await api.request(url, 'post', param);
                    if (resp.status == 201) {
                        this.$toast('提交成功！');
                        this.$router.push({path: '/'})
                    }
                } catch (e) {
                }

            },
            swiperIMG() {
                this.swiperImg = true;
                setTimeout(function () {
                    var mySwiper = new Swiper('.swiper-container', {
                        loop: true,
                        autoplayDisableOnInteraction: false,
                        pagination: '.swiper-pagination',
                    })
                    if (mySwiper.slides.length <= 3) {
                        mySwiper.lockSwipes();
                    }
                }, 100)
            },
            async abortMission(reason) {
                this.reasonShow = false;
                let param = {
                    work_id: this.task.work_id,
                    reason: reason,
                    consumer_id: this.task.consumer_id,
                }
                var url = '/abortMission';
                if (this.cross) {
                    url = '/cross_platform/abortMission'
                }
                await api.request(url, 'post', param).then(() => {
                    this.$toast('放弃成功！');
                    this.$router.push({path: '/'})
                })
            },
            async applySuccess() {
                this.apply = false;
                if (this.applyText.length <= 3) {
                    this.$toast('请正确填写介入理由！字数不得少于三个字');
                    return false;
                }
                let param = {
                    work_id: this.task.work_id,
                    job_id: this.task.job_id,
                    consumer_id: this.task.consumer.consumer_id,
                    content: this.applyText
                }

                await api.request('/works/apply', 'post', param).then(() => {
                    this.$toast('申请介入成功！');
                    this.$router.push({path: '/'})
                })
            },

            titleMessage(title) {
                MessageBox(title)
            },
            async answers(question_id, answer, work_id) {
                let param = {
                    question_id: question_id,
                    answer: answer,
                    work_id: work_id
                }
                let resp = await api.request('/answers', 'post', param);

                if (resp.status == 200) {
                    this.$toast(resp.data.message);
                    this.depth = true;

                    // 验证成功后 存储
                    localStorage.setItem('depth_text', answer)
                    localStorage.setItem('depth_work_id', work_id)
                } else {
                    // 验证失败删除 存储
                    localStorage.removeItem('depth_text')
                    localStorage.removeItem('depth_work_id')
                    this.depth = false;
                }
            },
            handleSuccess(e) {
                this.$toast('复制成功')
            },
            handleError(e) {
                this.$toast('复制失败，此机型不支持微信端复制')
            }
        },
        mounted() {
            window.addEventListener('scroll', this.handleScroll);
            window.uploadImg = this.uploadImg;
            this.setData()

            window.onbeforeunload = function (event) {
                return '您可能有数据没有保存';
            };
        },
        computed: {
            /**
             * 上部分已上传数量
             *
             * @returns {*}
             */
            topUploadedCount() {
                return _.filter(this.task.work.items.origin, o => {
                    return o.job_option_group == 1 && o.uploadedImg;
                }).length;
            },

            /**
             * 上部分总数
             *
             * @returns {*}
             */
            topCount() {
                return _.filter(this.task.work.items.origin, o => o.job_option_group == 1).length;
            },
            /**
             * 下部分已上传数量
             *
             * @returns {*}
             */
            downUploadedCount() {
                return _.filter(this.task.work.items.origin, o => {
                    return o.job_option_group == 2 && o.uploadedImg;
                }).length;
            },

            /**
             * 下部分总数
             *
             * @returns {*}
             */
            downCount() {
                return _.filter(this.task.work.items.origin, o => o.job_option_group == 2).length;
            }

        },
        watch: {
            topUploadedCount(newValue) {
                if (this.task.work.status.val != 5 && this.task.work.status.val != 6) {
                    if (newValue >= this.topCount) {
                        this.send()
                    }
                }
            },
            exampleUrl(url) {
                if (url) {
                    document.body.setAttribute("style", "overflow:hidden;");
                } else {
                    document.body.setAttribute("style", "overflow:visible;");
                }
            }
        }
    }
</script>
<style>
    .mint-msgbox-message {
        word-break: break-all;
    }

    .banner_head img {
        height: auto;
        max-height: 10rem;
    }

    #reason {
        background: rgba(0, 0, 0, .3);
        color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999999;
    }

    #reason ul {
        width: 70%;
        margin: 0 auto;
        background: #fff;
        text-align: center;
        border-radius: .3rem;
        overflow: hidden;
        margin-top: 20%

    }

    #reason ul li {
        color: #5AACFE;
        border-top: 1px solid #eee;
        padding: .3rem 0;
        font-size: .4rem;
    }

    #reason .reasonTop {
        padding: .6rem 0;
        border: 0;
        color: #000;
    }

    #reason .reasonBottom {
        color: #F84656;
    }

    .endClock {
        position: relative;
    }

    .huise {
        background: #999;
    }

    .W_550 {
        padding: 0 .3rem;
    }

    .remark {
        font-size: .3rem;
        color: #333;
        padding: .3rem .5rem;
        border-radius: .3rem;
        margin-top: .2rem;
    }

    #apply {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .5);
        margin: auto;
        z-index: 999;
        text-align: center;
        color: #999;
    }

    #apply .applyBody {
        width: 90%;
        height: 12rem;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        margin: auto;
        border-radius: .5rem;
        box-shadow: 0 0 .3rem #eee;
    }

    #apply label {
        display: block;
        margin: .2rem 0;
    }

    #apply h3 {
        color: #999;
        font-size: .6rem;
        margin: .5rem 0;
    }

    #apply input, #apply textarea {
        border-radius: .2rem;
        border: 1px solid #999;
        width: 80%;
        display: block;
        margin: 0 auto;
        box-sizing: border-box;
        font-size: .4rem;
        color: #999;
    }

    #apply input {
        padding: .2rem .5rem;
    }

    #apply textarea {
        padding: .2rem .5rem;
        height: 5rem;
        color: #000;
        -webkit-touch-callout: none;
        -webkit-text-size-adjust: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        outline: 0;
        -webkit-user-select: auto
    }

    #apply .applyBodyBtn {
        margin-top: 1.5rem;
    }

    #apply .applyBodyBtn button {
        border: 0;
        width: 3rem;
        height: 1rem;
        background: #999;
        border-radius: .2rem;
        margin: .3rem .5rem;
        font-size: .4rem;
        outline: none;
        color: #fff;
    }

    #depth {
        border: 0;
    }

    .answers {
        display: flex;
    }

    .answers > div {
        flex: 1;
    }

    .reward {
        margin: 0;
        font-size: .3rem
    }

    .fixed_color {
        background: #f2f2f2;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
</style>
